<template>
  <div class="app-container">
    mmmmmmmmmmm
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="新闻标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入新闻标题" />
      </el-form-item>
      <el-form-item label="新闻简介" prop="summary">
        <el-input v-model="form.summary" type="textarea" placeholder="请输入新闻简介" />
      </el-form-item>
      <el-form-item label="新闻正文" prop="content">
        <editor v-model="form.content" :min-height="192"/>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="form.author" placeholder="请输入作者" />
      </el-form-item>
      <el-form-item label="发布时间" prop="publishTime">
        <el-date-picker
          v-model="form.publishTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择发布时间"
        />
      </el-form-item>
      <el-form-item label="封面图片URL" prop="coverImage">
        <image-upload v-model="form.coverImage" />
      </el-form-item>
      <el-form-item label="新闻分类ID" prop="categoryId">
        <el-input v-model="form.categoryId" placeholder="请输入新闻分类ID" />
      </el-form-item>
      <el-form-item label="浏览量" prop="viewCount">
        <el-input v-model="form.viewCount" placeholder="请输入浏览量" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">保存修改</el-button>
      <el-button type="success" @click="previewNews">预览</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <!-- 预览弹窗 -->
    <el-dialog title="新闻预览" :visible.sync="previewVisible" width="70%">
      <h2>{{ form.title }}</h2>
      <p><strong>作者：</strong>{{ form.author }}</p>
      <p><strong>发布时间：</strong>{{ form.publishTime }}</p>
      <p><strong>新闻简介：</strong>{{ form.summary }}</p>
      <div v-html="form.content"></div>
      <el-image :src="form.coverImage" style="max-width: 100%; margin-top: 10px;"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { getNews, updateNews } from "@/api/news/news";

export default {
  name: "ChangeNews",
  data() {
    return {
      form: {
        id: null,
        title: "",
        summary: "",
        content: "",
        author: "",
        publishTime: "",
        coverImage: "",
        categoryId: "",
        viewCount: "",
        remark: "",
      },
      rules: {
        title: [{ required: true, message: "新闻标题不能为空", trigger: "blur" }],
        content: [{ required: true, message: "新闻正文不能为空", trigger: "blur" }],
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }],
      },
      previewVisible: false,
    };
  },
  created() {
    const newsId = this.$route.query.id;
    if (newsId) {
      this.loadNews(newsId);
    }
  },
  methods: {
    async loadNews(id) {
      const { data } = await getNews(id);
      this.form = { ...data };
    },
    async submitForm() {
      await updateNews(this.form);
      this.$message.success("新闻修改成功！");
      this.$router.push("/news/index");
    },
    previewNews() {
      this.previewVisible = true;
    },
    goBack() {
      this.$router.push("/news/index");
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
